實作畫面

今天要來帶大家做留言板 ios 鬧鐘 的實作！
先給大家看成品圖！

MainView ( 主畫面 )

AddAlarmView ( 新增和編輯鬧鐘畫面 )

RepeatView （ 重複鬧鐘畫面 ）

介紹專案

我們透過前面幾天的練習已經學會了

• 畫面編排
• 元件互動
• tableView 的設定
• Realm 資料庫的運用
• 頁面的切換

今天我們來利用之前學的來實作 ios 的系統鬧鐘，我們主要目標放在鬧鐘本體的功能上!
由於今天的實作頁面比較多所以建議用 MVC 架構 去寫會比較輕鬆喔!

MainView ( 主畫面 )

畫面元件需求

1. NavigationBar ( 用程式碼寫 )
2. tableView ( xib )
3. tab bar ( xib )
   • tab bar item 4 個 ( 世界時鐘 、 鬧鐘 、 碼錶 、 計時器 )

Cell 元件需求

1. label 3 個 （ 上午/下午 、 鬧鐘時間 、 [鬧鐘名字，重複星期] ）
2. Swich 1 個 （ 開關鬧鐘 ）

我們 鬧鐘主畫面 的功能有：

1. 顯示目前的所有鬧鐘
2. 鬧鐘按照要響鈴的時間做排序
3. 點選鬧鐘 Cell 可以present AddAlarmView 來編輯鬧鐘的功能
4. 主畫面上方有 NavigationBar 可以選擇新增和編輯功能
5. 主畫面的鬧鐘 Cell 要能用 Swich開啟和關閉
6. 鬧鐘設定的時間(12小時制 且 有中文上/下午) 、 Cell 要顯示鬧鐘標籤 、 重複的天數
7. 鬧鐘 Cell 左滑要有刪除選項 以及 上方 NavigationBar 的編輯按鈕按下也能刪除鬧鐘
8. 上方 NavigationBar 新增按鈕按下會 Present 出 AddAlarmView
9. 下方有 tabBar 可以選擇 世界時鐘 、 鬧鐘 、 碼錶 、 計時器 （本專案不做鬧鐘外功能）
10. 設定鬧鐘時間到了會跳警示視窗提醒

AddAlarmView ( 新增和編輯鬧鐘畫面 )

畫面元件需求

1. NavigationBar ( 用程式碼寫 )
2. DatePicker ( xib )
3. tableView ( xib )
4. button ( xib ) --> 編輯頁面用的刪除按鈕

Cell 元件需求

1. label 1 個 （ 用來顯示當前 cell 的名字 ）
2. label 1 個 （ 用來顯示當前 cell 的值 ）--> 重複和提示聲的 cell
3. textField 1 個 （ 用來讓使用者填入鬧鐘名稱 ）
4. Swich 1 個 （ 開關稍後提醒 ）

新增鬧鐘畫面 的功能有：

1. 新增鬧鐘 到資料庫的功能
2. 畫面上方有 NavigationBar 會顯示目前是新增鬧鐘頁面並可以選擇儲存和取消功能
3. 畫面上有 datePicker 用 wheels style 和 Time mode 來選擇時間
4. 跳轉到新增鬧鐘畫面時 datePicker 預設為現在的時間
5. 當調整時間時超過 12 點就切換一旁顯示的上午以及下午（ 要顯示上午/下午而不是 AM / PM ）
6. 下面有 tableView 會顯示 cell 功能:
   • repeat 選項會跳轉到 RepeatView
     • 選項預設為 “永不” 選擇後 label 會顯示目前選擇的值
     • 特別：週一到週五（平日）、 週六及週日（週末）、 週一到周日（每天）
   • 標籤 選項右方的 textField 可以讓使用者輸入鬧鐘名字
     • textField 預設為空值，設定 placeholder 為 “鬧鐘”
   • 提示聲 選項預設為 “預設”，選擇後 label 會顯示目前選的提示聲（可做可不做）
   • 稍後提醒 選項右方的 Swich 要能儲存目前是開啟或關閉，預設為開啟

編輯鬧鐘畫面 的功能有：

與上方新增鬧鐘畫面功能一致
但是 tableView 下方多一個 刪除 button

RepeatView （ 重複鬧鐘畫面 ）

畫面元件需求

1. NavigationBar ( 用程式碼寫 )
2. tableView ( xib )

Cell 元件需求

1. label 1 個 （ 顯示星期一到星期日 ）

重複鬧鐘畫面 的功能有：

1. 畫面上方有 NavigationBar 會顯示目前是重複鬧鐘頁面並可以選擇返回功能
2. 點選返回功能會 儲存資料並把值顯示在 AddAlarmView 的 tableView Cell
3. 點選 tableView Cell 可以勾選想要重複的星期一到星期日

結論

今天先跟大家介紹我們需要設計的各個頁面功能，明天開始帶大家做實作！
今天介紹中 AddAlarm 中還有一個提示音的頁面可以做 present 這個功能大家可以試著實作看看喔！
最後我會寫一篇來介紹提示音的頁面
雖然今天的字比較多，但是希望大家不只是單純的照我的實作教學去做
而是自己先試著照要求完成來訓練自己喔!